<!DOCTYPE html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/bootstrap-3.3.7/css/bootstrap.min.css" />
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script type="text/javascript" src="js/vue.js" ></script>
		<style>
			#app-main{position: relative;}
			#edit-win{position: absolute;background-color: #eee;padding: 10px;}
			#edit-win hr{border-top-color: #ddd;margin: 0;}
			#edit-win .caption{margin: 5px 0;}
			#edit-win .child-item{padding-left: 10px;margin-bottom: 10px;}
			#edit-win .child-item .form-control{width: 70%;display: inline-block;}
			#edit-win .child-item .glyphicon{border: 1px solid #47c549;color: #ffffff;border-radius: 50%;padding: 4px;background-color: #31ad31;cursor: pointer;font-size: 12px;}
			#edit-win .child-item .glyphicon-minus{background-color: #777;border-color: #777;}
			.tag{margin: 7px 0 0;font-weight: normal;color: #999;}
			label{color: #999;}
			.row{margin: 0 20px;padding: 8px 0;}
			.line{border: 1px solid #ccc;background-color: #eee;}
			#type-btn button{margin: 5px 0;}
		</style>
	</head>
	<body>
		<div id="app-main">
			<!-- 左侧 -->
			<div id="app-main-l" class="col-md-8">
				<div v-for="elem in elems" class="row" 
					v-bind:class="{ line: elem.isActive }"
					v-on:click="chosen(elem.id)" 
					v-bind:key="elem.id">
					<div class="col-sm-4 text-right">
						<label class="tag">{{elem.label}}</label>
					</div>
					<!-- 新加内容区  -->
					<div class="col-sm-6">
						<div v-if="elem.type === 'text'">
							<input type="text" class="form-control" v-model="elem.placeholder" disabled="disabled" />
						</div>
						<div v-if="elem.type === 'textarea'">
							<textarea class="form-control" rows="3" v-model="elem.placeholder" disabled="disabled"></textarea>
						</div>
						<div v-else-if="elem.type === 'checkbox'">
							<div v-for="(item, index) in elem.items" class="checkbox">
								<label>
								  <input type="checkbox" disabled="disabled"> {{item}}
								</label>
							</div>
						</div>
						<div v-else-if="elem.type === 'radio'">
							<div v-for="(item, index) in elem.items" class="radio">
								<label>
								  <input type="radio" disabled="disabled"> {{item}}
								</label>
							</div>
						</div>
						<div v-else-if="elem.type === 'select'">
							<select class="form-control" disabled="disabled">
							  <option v-for="(item, index) in elem.items">{{item}}</option>
							</select>
						</div>
						<div v-if="elem.type === 'file'">
							<input type="file" class="form-control" disabled="disabled" />
						</div>
					</div>
				</div>
				<!-- 类型按钮区 -->
				<div id="type-btn" class="row">
					<div class="col-sm-4" v-for="typeBtn in typeBtns">
						<button class="btn btn-default btn-lg btn-block" v-on:click="addNode(typeBtn.type)">{{typeBtn.title}}</button>
					</div>
				</div>
			</div>
			<!-- 右侧 -->
			<div id="app-main-r" class="col-md-4">
				<div id="edit-win">
					<!--<h2>{{nowElem.type}}</h2>
					<h2>{{nowElem.label}}</h2>-->
					<div class="caption">添加{{nowElem.alt}}</div>
					<hr />
					<!-- 标题 -->
					<div class="caption">标题</div>
					<input class="form-control" v-model="nowElem.label"/>
					
					<div v-if="nowElem.type === 'text'">
						<!-- 默认值 -->
						<div class="caption">默认值</div>
						<input type="text" class="form-control" v-model="nowElem.placeholder"/>
					</div>
					<div v-if="nowElem.type === 'textarea'">
						<!-- 默认值 -->
						<div class="caption">默认值</div>
						<textarea class="form-control" rows="3" v-model="nowElem.placeholder"></textarea>
					</div>
					<div v-else-if="nowElem.type === 'checkbox'">
						<!-- 选项 -->
						<div class="caption">选项</div>
						<div class="child-item" v-for="(nitem, index) in nowElem.items">
							<input class="form-control" v-model="nowElem.items[index]"/>
							<span class="glyphicon glyphicon-plus" aria-hidden="true" v-on:click="addNewItem"></span>
							<span class="glyphicon glyphicon-minus" aria-hidden="true" v-on:click="removeItem(index)"></span>
						</div>
					</div>
					<div v-else-if="nowElem.type === 'radio'">
						<!-- 选项 -->
						<div class="caption">选项</div>
						<div class="child-item" v-for="(nitem, index) in nowElem.items">
							<input class="form-control" v-model="nowElem.items[index]"/>
							<span class="glyphicon glyphicon-plus" aria-hidden="true" v-on:click="addNewItem"></span>
							<span class="glyphicon glyphicon-minus" aria-hidden="true" v-on:click="removeItem(index)"></span>
						</div>
					</div>
					<div v-else-if="nowElem.type === 'select'">
						<!-- 选项 -->
						<div class="caption">选项</div>
						<div class="child-item" v-for="(nitem, index) in nowElem.items">
							<input class="form-control" v-model="nowElem.items[index]"/>
							<span class="glyphicon glyphicon-plus" aria-hidden="true" v-on:click="addNewItem"></span>
							<span class="glyphicon glyphicon-minus" aria-hidden="true" v-on:click="removeItem(index)"></span>
						</div>
					</div>
					
					<!-- 必填 -->
					<div class="checkbox">
					  <label>
					    <input type="checkbox" v-model="nowElem.required">必填
					  </label>
					</div>
				</div>
			</div>
		</div>	
		<script type="text/javascript">
			/*Vue.component('button-counter', {
			  template: '<button v-on:click="increment">{{ counter }}</button>',
			  data: function () {
			    return {
			      counter: 0
			    }
			  },
			  methods: {
			    increment: function () {
			      this.counter += 1
			      this.$emit('increment')
			    }
			  },
			})*/
			var re = [
						{
							id:'t1',
							type:"text",
							alt:"单行文字",
							label:"文本",
							defVal:"文本默认值",
							required:true,
							isActive:false
						},
						{
							id:'t2',	
							type:"checkbox",
							alt:"多项选择",
							label:"多选项",
							items:["项1","项2","项3","项4","项5"],
							required:true,
							isActive:true
						}
			];
			var vm = new Vue({
				el:"#app-main",
				data:{
					elems:[],//创建项的数据
					nowElem:{},//当前编辑项的数据
					typeBtns:[//类型按钮
								{
									type:'text',
									title:'单行文字'
								},
								{
									type:'textarea',
									title:'多行文字'
								},
								{
									type:'checkbox',
									title:'多项选择'
								},
								{
									type:'radio',
									title:'单项选择'
								},
								{
									type:'select',
									title:'下拉框'
								},
								{
									type:'file',
									title:'上传图片'
								},
					]
					
				},
				methods:{
					//新增类型
					addNode: function(type){
						//关闭所有选中状态
						this.cancelAllActive();
						var newElem = {
							id:'t'+(this.elems.length+1),
							type:"text",
							alt:"单行文字",
							label:"文本",
							defVal:"文本默认值",
							required:true,
							isActive:true //设置当前为选中
						};
						switch(type)
						{
							case 'text':
								newElem.placeholder = "";
								break;
							case 'textarea':
							  	newElem.type = "textarea";
							  	newElem.placeholder = "";
							  	newElem.alt = "多行文字";
							  	newElem.label = "未命名textarea";
								break;
							case 'checkbox':
						  		newElem.type = "checkbox";
						  		newElem.alt = "多项选择";
							  	newElem.label = "未命名checkbox";
							  	newElem.items = [''];
								break;
							case 'radio':
						  		newElem.type = "radio";
						  		newElem.alt = "单项选择";
							  	newElem.label = "未命名radio";
							  	newElem.items = [''];
								break;
							case 'select':
						  		newElem.type = "select";
						  		newElem.alt = "下拉框";
							  	newElem.label = "未命名select";
							  	newElem.items = [''];
								break;
							case 'file':
						  		newElem.type = "file";
						  		newElem.alt = "上传图片";
							  	newElem.label = "未命名file";
								break;
							default:
								break; 
						}
						this.elems.push(newElem);
						this.nowElem = newElem;
					},
					//关闭所有选中状态
					cancelAllActive:function(){
						this.elems.forEach(function(n){n.isActive?(n.isActive = false):"";});
					},
					//选中事件
					chosen:function(id){
						console.log(id);
						//关闭所有选中状态
						this.cancelAllActive();
						var thatNowElem = {};
						this.elems.forEach(function(n){
							if(n.id == id){
								n.isActive = true;
								thatNowElem = n;
								return;
							}
						});
						this.nowElem = thatNowElem;
					},
					addNewItem: function () {
				    	this.nowElem.items.push('');
				    },
				    removeItem: function(index){
				    	console.log('remove')
				    	if(this.nowElem.items.length>1){
				    		this.nowElem.items.splice(index, 1);
				    	}
				    	
				    }
				},
				updated:function(){
					
					var h = $("#app-main-l").height()-180;
					console.log(h)
					$("#edit-win").css({top: h+"px"});
				},
				
			});

		</script>
	</body>
</html>
